<!--
 @Description 资料列表
 @date 2022/11/11
-->
<template>
  <div class="dataListOne" :style="{ 'margin-top': top, 'padding-left': spacing, 'padding-right': spacing }">
    <cell-title
      v-if="isShowModuleName"
      :title="moduleName"
      :hide-desc="true"
      :option="option"
      :style="{
        'background-color': option.backgroundColor,
        'border-radius':
          radiusSize + ' ' + radiusSize + ' 0 0',
      }"
    />

    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :immediate-check="false"
        :error.sync="error"
        :finished="finished"
        :finished-text="finishedText"
        loading-text="正在加载中..."
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >

        <ul>
          <li v-for="(item, index) in list" :key="index">
            <van-image :src="setImgPath(getMapping(item, 'imgId'), getMapping(item, 'imgUrl'))" :fit="imgType">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error>
                <img src="../../images/base/error-icon.png" alt>
              </template>
            </van-image>
            <p class="etc">{{ isInitData ? getMapping(item, 'name') : item.name }}</p>
          </li>
        </ul>

      </van-list>
    </van-pull-refresh>

  </div>
</template>

<script>
import mixins from '../mixins'
import mixin from './mixins'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'

export default {
  name: 'DataListOne',
  components: { CellTitle },
  mixins: [mixins, mixin],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      page: 1,
      total: 0,
      isNoData: false,
      isLoadError: false,
      error: false,
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      list: [],
      defaultList: [
        {
          pic: '',
          name: '这里是标题可配这里是标题可配...',
          technicalTitle: '*******',
          synopsis: 'xxxxxxxxxxxxxxxxxxx',
          id: ''
        },
        {
          pic: '',
          name: '这里是标题可配...',
          technicalTitle: '*******',
          synopsis: 'xxxxxxxxxxxxxxxxxxx',
          id: ''
        },
        {
          pic: '',
          name: '这里是标题可配...',
          technicalTitle: '*******',
          synopsis: 'xxxxxxxxxxxxxxxxxxx',
          id: ''
        },
        {
          pic: '',
          name: '这里是标题可配...',
          technicalTitle: '*******',
          synopsis: 'xxxxxxxxxxxxxxxxxxx',
          id: ''
        },
        {
          pic: '',
          name: '这里是标题可配...',
          technicalTitle: '*******',
          synopsis: 'xxxxxxxxxxxxxxxxxxx',
          id: ''
        }
      ]

    }
  },
  async created() {
    if (this.isInitData) {
      await this.initData()
    } else {
      this.list = this.defaultList
      this.finished = true
    }
  },
  methods: {
    /**
     * 用于initData方法调用完设置数据
     */
    setData(result) {
      this.finished = false
      this.loading = false
      this.isLoading = false
      if (Object.prototype.toString.call(result.cardComp?.data) === '[object Array]') {
        this.list = result.cardComp?.data || []
        this.isNoData = this.list.length < 1
      } else {
        const { rows, total } = result?.dataList.data || {}
        if (this.page === 1) {
          this.list = rows
          this.isNoData = total < 1
        } else {
          this.list.push(...rows)
        }

        if (this.list.length >= total) {
          this.finished = true
        } else {
          this.finished = false
        }
      }
      if (this.isNoData) {
        this.finishedText = ''
      } else {
        this.finishedText = '已经到底了'
      }
    },
    onRefresh() {
      this.finished = false
      this.page = 1
      // this.list = []
      this.initData()
    },

    onLoad() {
      if (!this.isLoading) {
        this.page += 1
        this.initData()
      } else {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/utility/rem.scss';

.dataListOne {
  width: 100%;

  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #ffffff;
    border-radius: rem(16);
    padding-top: rem(24);

    > li {
      width: 33.3%;
      display: flex;
      flex-direction: column;
      margin-bottom: rem(24);
      text-align: center;
      align-items: center;
      justify-content: center;

      .van-image {
        width: rem(190);
        height: rem(254);
        border-radius: rem(12);

        .van-image__img {
          border-radius: rem(12);
        }

        .van-image__error {
          border-radius: rem(12);

          img {
            width: rem(120);
            height: rem(120);
          }
        }

      }

      > p {
        width: 100%;
        font-size: rem(26);
        text-align: center;
        color: #333333;
        margin-top: rem(24);
        padding: 0 rem(15);
      }
    }

  }
}
</style>
